import { Button, Input, Space } from "antd"
import type { InputRef } from "antd"
import { forwardRef, LegacyRef, useRef } from "react"

// ref 通过第二个参数传入使用
const InputWrap = (_props: any, ref: LegacyRef<InputRef> | undefined) => {
  return (
    <Input
      ref={ref}
      value='点击按钮聚焦'
      style={{ width: 200 }}
    />
  )
}

// forwardRef包裹的函数组件，才可使用 ref 这个 prop
const InputWrapForwardRef = forwardRef(InputWrap)

const ForwardRefDemo = () => {
  const domRef = useRef<InputRef>(null)
  const handleClick = () => {
    domRef.current?.focus()
  }
  return (
    <>
      <h3>--获取子组件dom</h3>
      <Space>
        <InputWrapForwardRef ref={domRef} />
        <Button onClick={handleClick} type="primary">forwardRef获取子组件dom聚焦</Button>
      </Space>
      <ul>
        <li>因为ref不能作为函数组件的prop，导致无法获取子组件的dom</li>
        <li>此时可以使用forwardRef包裹子组件解决，子组件第二个参数即作为ref传递给子组件的dom</li>
        <li>而更优雅的方式则是使用指令式api - useImpreativeHandle</li>
        <li>这个 hook 实际上就是将一个对象绑定到 ref 对象的 current 属性</li>
      </ul>
    </>
  )
}

export default ForwardRefDemo
